<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <!-- 主表单区域 -->
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-col :span="24">
              <a-form-model-item label="订单编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dingdbh">
                <a-input v-model="model.dingdbh" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="产品名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dingdbh">
                <a-input v-model="model.chanpmc" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="订单状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dingdbh">
                <a-input v-model="model.dingdzt_dictText" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
          </a-col>

          <a-col :span="12">
            <a-col :span="24">
              <a-form-model-item label="订单金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dingdje">
                <a-input-number v-model="model.dingdje" placeholder="" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="审核方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dingdje">
                <a-input-number v-model="model.shenhfs_dictText" placeholder="" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="审核结果" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dingdje">
                <a-input-number v-model="model.shenhjg_dictText" placeholder="" style="width: 100%" />
              </a-form-model-item>
            </a-col>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="保单详情" :key="refKeys[0]" :forceRender="true">
        <kuyb-order-policy-form
          ref="kuybOrderPolicyForm"
          @validateError="validateError"
          :disabled="formDisabled"
        ></kuyb-order-policy-form>
      </a-tab-pane>

      <a-tab-pane tab="支付详情" :key="refKeys[1]" :forceRender="true">
        <kuyb-order-payment-form
          ref="kuybOrderPaymentForm"
          @validateError="validateError"
          :disabled="formDisabled"
        ></kuyb-order-payment-form>
      </a-tab-pane>

      <a-tab-pane tab="产品详情" :key="refKeys[2]" :forceRender="true">
        <j-editable-table
          :ref="refKeys[0]"
          :loading="kuybOrderChanpTable.loading"
          :columns="kuybOrderChanpTable.columns"
          :dataSource="kuybOrderChanpTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :actionButton="false"
        />
      </a-tab-pane>

      <a-tab-pane tab="审批记录" :key="refKeys[3]" :forceRender="true">
        <a-timeline>
          <a-timeline-item v-for="comment in commentList" :key="comment.id">
            审批方式: {{ comment.shenhfs == "1" ? "自动核保" : "人工核保" }} -
            审批时间: {{ comment.createTime }} -
            审批结果: {{ comment.shenhjg == "2" ? "审核通过" : "已驳回" }} -
            审批意见: {{ comment.wentsm }}
          </a-timeline-item>
        </a-timeline>
      </a-tab-pane>
    </a-tabs>
  </a-spin>
</template>

<script>
import { getAction } from '@/api/manage'
import { FormTypes, getRefPromise, VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
import { validateDuplicateValue } from '@/utils/util'
import KuybOrderPaymentForm from './KuybOrderPaymentForm.vue'
import KuybOrderPolicyForm from './KuybOrderPolicyForm.vue'

export default {
  name: 'KuybOrderForm',
  mixins: [JEditableTableModelMixin],
  components: {
    KuybOrderPaymentForm,
    KuybOrderPolicyForm,
  },
  data() {
    return {
      commentList: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
      model: {},
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {},
      refKeys: ['kuybOrderPayment', 'kuybOrderPolicy', 'kuybOrderChanp'],
      tableKeys: ['kuybOrderChanp'],
      activeKey: 'kuybOrderPayment',
      // 支付详情
      kuybOrderPaymentTable: {
        loading: false,
        dataSource: [],
        columns: [],
      },
      // 订单和保单
      kuybOrderPolicyTable: {
        loading: false,
        dataSource: [],
        columns: [],
      },
      // 订单和产品
      kuybOrderChanpTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '订单编号',
            key: 'dingdbh',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '产品名称',
            key: 'chanpmc',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
          },
        ],
      },
      url: {
        add: '/order/kuybOrder/add',
        edit: '/order/kuybOrder/edit',
        queryById: '/order/kuybOrder/queryById',
        kuybOrderPayment: {
          list: '/order/kuybOrder/queryKuybOrderPaymentByMainId',
        },
        kuybOrderPolicy: {
          list: '/order/kuybOrder/queryKuybOrderPolicyByMainId',
        },
        kuybOrderChanp: {
          list: '/order/kuybOrder/queryKuybOrderChanpByMainId',
        },
      },
    }
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {},
  methods: {
    addBefore() {
      this.$refs.kuybOrderPaymentForm.clearFormData()
      this.$refs.kuybOrderPolicyForm.clearFormData()
      this.kuybOrderChanpTable.dataSource = []
    },
    getAllTable() {
      let values = this.tableKeys.map((key) => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      let that = this

      this.$nextTick(() => {
        if (this.model.kuybOrderChanpList[0]) this.model.chanpmc = this.model.kuybOrderChanpList[0].chanpmc

        this.model.dingdje = this.model.dingdje / 100

        this.$refs.kuybOrderPaymentForm.initFormData(this.url.kuybOrderPayment.list, this.model.id)
        this.$refs.kuybOrderPolicyForm.initFormData(this.url.kuybOrderPolicy.list, this.model.id)

        getAction('/orderShenh/kuybOrderShenh/list', { dingdbh: this.model.dingdbh }).then((res) => {
          if (res.success) {
            that.commentList = res.result.records
          }
        })
      })

      // 加载子表数据
      if (this.model.id) {
        let params = { id: this.model.id }
        this.requestSubTableData(this.url.kuybOrderChanp.list, params, this.kuybOrderChanpTable)
      }
    },
    //校验所有一对一子表表单
    validateSubForm(allValues) {
      return new Promise((resolve, reject) => {
        Promise.all([this.$refs.kuybOrderPaymentForm.validate(0), this.$refs.kuybOrderPolicyForm.validate(1)])
          .then(() => {
            resolve(allValues)
          })
          .catch((e) => {
            if (e.error === VALIDATE_NO_PASSED) {
              // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
              this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
            } else {
              console.error(e)
            }
          })
      })
    },
    /** 整理成formData */
    classifyIntoFormData(allValues) {
      let main = Object.assign(this.model, allValues.formValue)

      return {
        ...main, // 展开
        kuybOrderPaymentList: this.$refs.kuybOrderPaymentForm.getFormData(),
        kuybOrderPolicyList: this.$refs.kuybOrderPolicyForm.getFormData(),
        kuybOrderChanpList: allValues.tablesValue[0].values,
      }
    },
    validateError(msg) {
      this.$message.error(msg)
    },
  },
}
</script>

<style scoped>
</style>